<template>
  <div class="promotiondetails">
        <!--详情-->
      <div class="el-dialog-tab">
         <div class="v_retgo" @click="returngo"><i class="el-icon-arrow-left"></i>推广详情</div>
        <div class="xm-item">

          <div class="left">
              <p class="p tit"><span class="line"></span>推广需求</p>
              <p class="p subTit">{{data.name}}</p>
              <p class="p des">推广目标 : {{data.pv}}</p>
              <p class="p des" v-if="data.chargeWay==3">推广金额 : {{data.price | money}}</p>
              <p class="p des" v-if="data.chargeWay!=3">推广金额 : {{data.budget * data.num | money}}</p>
              <p class="p des">推广时间 : {{data.startTime | stampFormate2}}——{{data.endTime | stampFormate2}}</p>
              <p class="p des">推广原文 : {{data.articleTitle}}</p>
          <!--     <p class="p info">
                  <span v-if="channelDetail.demandStrategy == 1">公开 • </span>
                  <span v-if="channelDetail.demandStrategy == 2">内部 • </span>
                  <span v-if="channelDetail.demandStrategy == 3">固定 • </span>
                  <span>{{channelDetail.platform}} • </span>
                  <span>手机号：{{channelDetail.phone}}</span>
              </p> -->
              <el-button v-if="data.status==4 || (data.counts < data.num && data.status!=3 && data.channelId==null)" type="warning" plain @click="postChannels">创建推广</el-button>

              <el-button type="warning" plain disabled v-if="data.counts >= data.num && data.status!=3 && data.status!=4 && data.status!=5 && data.channelId==null">已完成</el-button>
              <el-button  type="warning" plain disabled v-if="data.status==3 && data.channelId==null">已结束</el-button >
          </div>
        </div>
          <div class="xm-item" v-if="data.status!=4 && data.channelId!=null">
              <div class="left">
                  <p class="p tit"><span class="line"></span>推广信息</p>
                  <div class="v_progress">
                    <el-progress :text-inside="true" :stroke-width="10" :percentage="tim"></el-progress>
                    <!-- <p class="p des v_des">推广金额 : {{data.price | money}}</p> -->
                    <div class="pacerow v_des" v-if="list.demandChargeWay==2">
                     <p class="pacerowt">已有{{list.pv}}阅读，达到{{list.demandPv}}阅读，可获得<span>{{list.budget / list.demandNum | money}}</span>元</p>
                   <!--   <p class="pacerowb" v-if="list.demandUpdateTime!=null">{{list.demandUpdateTime | stampFormate2}}</p>
                     <p class="pacerowb" v-if="list.demandUpdateTime==null">{{list.demandCreateTime | stampFormate2}}</p> -->
                    </div>
                   <div class="pacerow v_des" v-if="list.demandChargeWay==1">
                      <p class="pacerowt">已有{{list.pv}}阅读，已获得
                      <span v-if="list.demandPv > list.pv">{{list.demandPrice * list.pv | money}}</span>
                      <span  v-if="list.demandPv <= list.pv">{{list.demandPrice * list.demandPv | money}}</span>
                        元,最高付费<span>{{list.demandPv}}</span>阅读,可获得<span>{{list.budget / list.demandNum | money}}</span>元</p>
                      <!--  <p class="pacerowb" v-if="list.demandUpdateTime!=null">{{list.demandUpdateTime | stampFormate2}}</p>
                      <p class="pacerowb" v-if="list.demandUpdateTime==null">{{list.demandCreateTime | stampFormate2}}</p> -->
                  </div>
                    <!-- <p class="p des">推广金额 : {{data.price | money}}</p> -->
                  </div>
             <!--      <div class="blueZone">
                      <span v-if="channelDetail.demandChargeWay == 2">预定流量</span>
                      <span v-if="channelDetail.demandChargeWay == 1">单次流量</span>
                      <span v-if="channelDetail.demandChargeWay == 3">一口价</span>
                      {{channelDetail.pv}}/{{channelDetail.demandTotalPv}}，
                      {{channelDetail.demandPrice | getFormatOfMoney }} 元/阅读，
                      预计支出金额<span v-if="channelDetail.channelAmount!=null">{{channelDetail.channelAmount | getFormatOfMoney }}</span><span v-if="channelDetail.channelAmount==null">0</span>
                      <span v-if="channelDetail.actualAmount !=0 ">
                         ，已支出{{channelDetail.actualAmount | getFormatOfMoney }}
                      </span>

                  </div> -->
                  <div class="qrCodeZone">
                      <canvas id="canvas" class="canvas"></canvas>
                      <div class="canvas-right">
                          <p>推广状态:
                              <span v-if="list.status==1">待推广</span>
                              <span v-if="list.status==2">推广中</span>
                              <!-- <span v-if="list.status==3&& data.demandPv > data.pv">未完成</span> -->
                              <!-- <span v-if="list.status==3&& data.demandPv <= data.pv">已完成</span> -->
                              <span v-if="list.status==3">已完成</span>

                              <span v-if="list.status==5">已过期</span>
                              <span v-if="list.status==6">未完成</span>
                              <span v-if="list.status==7">已取消</span>
                          </p>
                          <p>推广时间:{{ list.demandStartTime | stampFormate2}} ~ {{ list.demandEndTime | stampFormate2}}</p>
                          <p>推广文章标题:{{list.articleName}}</p>
                          <p>推广链接文章链接: <el-input v-model="copytext" class="botIpt" size="mini" id="botIpt"></el-input><el-button type="text" @click="copyUrl">复制链接</el-button></p>
                          <p class="p info">
                              <span>阅读数{{list.pv}} • </span>
                              <span>点赞数{{list.articleThumbNum}} • </span>
                              <span>用户数{{list.uv}} • </span>
                              <span>创建时间:{{list.createTime | stampFormate2}}</span>
                          </p>
                      </div>
                  </div>
                  <el-button size="mini" type="warning" plain @click="downloadImg">下载二维码</el-button>
              </div>
          </div>
      </div>

  </div>
</template>
<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    var QRCode = require('qrcode')
    var canvas = ''

  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '', //行业状态
        // 列表

        // 分页
        inde:1,
        pages:{
           no:1,
           size:10,
        },
        // 弹层
        channelDetail:'',
        dialog: {
          title: '推广', // 弹层标题
          typ: 6, // 弹框类型1.用户；2.设置；3.删除
        },
        centerDialogVisible: false, // 弹框
        data:'',  //推广需求详情  
        marketid:'',//推广详情id
        list:'',  //推广详情
        copytext:'',//推广路径
        tim:0,
      }
    },
    computed: {
            //将存在store中的数据取出
            picHead() {
                return this.$store.state.picHead
            },
            articlesurl() {
                return this.$store.state.articlesurl
            },
        },
    mounted () {
      this.dialogshowFront()
    },
    methods: {
  
      dialogshowFront:function(id){

            // this.marketid=id
            this.marketid=this.$route.query.id
            this.dialogshow()
            // 
            // that.$router.push({path:"/promotiondetails",query:{id:id}})
      },
      // 
       getQRCode (url) {
        let that = this;
        let ele = document.getElementById('canvas');
          QRCode.toCanvas(ele, url, (error) => {
              if (error) {
              } else {
              }
          });
      },
      returngo:function(){
          window.history.go(-1);
      },
      // 推广需求详情弹出层
      dialogshow:function(){
        let that=this;  
      commonService.getChannelDemandid(that.marketid).then(function(res){
                    if(res.data.code == 200){
                        that.data=res.data.datas
                         that.data.counts=Number(that.data.counts)
                        // that.ettime = that.data.endTime - that.data.startTime
                        if(that.data.status!=4 && that.data.channelId != null){
                           //获取推广详情
                            that.getChannelsId()
                        }
                        that.centerDialogVisible=true  
                    }
              })
      },
      // 创建推广
      postChannels:function(){
              let that=this
              commonService.postChannels({channelDemandId:that.data.id,articleId:that.data.articleId,projectId:that.data.projectId}).then(function(res){
              
                    if(res.data.code == 200){
                        that.dialogshow()
                        // that.hide()
                        that.$message.success('创建推广成功')
                        // that.$router.push({path:"/myextensionshare",query:{id:res.data.datas}})
                        // that.countdown=common.getTimer(that.data.endTime) 
                    }
              })
          },
        // 我的推广详情
          getChannelsId:function(){
            let that=this
             let id=that.$route.query.id
              commonService.getChannelsId(that.data.channelId).then(function(res){
                    if(res.data.code == 200){
                        that.list=res.data.datas
                        // that.ettime=that.data.demandEndTime - that.data.demandStartTime
                         that.copytext=that.articlesurl + that.list.url
                         console.log(that.list)
                         that.list.pv=Number(that.list.pv) 
                         that.list.demandPv=Number(that.list.demandPv)
                         if(that.list.demandPv <= that.list.pv){

                                that.tim=100
                         }else{
                          that.tim= Number((that.list.pv / that.list.demandPv * 100).toFixed(0))

                         }
                          that.getQRCode(that.copytext)

                         // if(that.data.pv==null){
                         //      that.data.pv=0
                         // }
                        // that.countdown=common.getTimer(that.data.endTime) 
                    }
              })

          },
        // 下载二维码
      downloadImg () {
          let that = this;
          //let canvas = document.getElementById('canvas').childNodes[0];
          let canvas = document.getElementById('canvas');
          let MIME_TYPE = 'image/png';
          let dlLink = document.createElement('a');
          dlLink.download = 'qrcode.png';
          dlLink.href = canvas.toDataURL('image/png');
          dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.href].join(':');
          document.body.appendChild(dlLink);
          dlLink.click();
          document.body.removeChild(dlLink);
      },
      // 复制链接
      copyUrl () {
          let that = this;
          let obj = document.getElementById('botIpt');
          obj.select();
          document.execCommand("Copy");
          that.$message({
              message: '复制成功！',
              type: 'success'
          });
      }

    },
  }
</script>
<style lang="less">
    .promotiondetails{
      margin: 20px;
       padding: 20px;
        background: #fff;
        border: 1px solid #dcdfe6;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
         box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
      .el-dialog__body{
          padding: 10px 20px 30px;
      }
 .v_retgo{
      margin-left: 10px;
      cursor: pointer;
      font-size: 16px;
      color: #333;line-height: 30px;
      i{
        margin: 0 6px;
        font-size: 16px;
        color: 16px;
      }
  }

      .xm-item{
        line-height: 1.8;
        font-family: Menlo,Monaco,Consolas,Courier,monospace;
        font-size: 12px;
        padding: 10px 24px 18px;
        background-color: #fff;
        border-radius: 4px;
        -webkit-font-smoothing: auto;
        display:flex;justify-content: space-between;align-items: flex-start;
        .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
            display:flex; justify-content: flex-start; align-items: center;
        .line{display:block;height: 14px;border-left:2px solid #f29700;float:left;margin-right: 8px;}
        }
        .p.subTit{font-size: 16px;color: #333;font-weight: bold;}
        .p.des{min-height: 25px;font-size: 14px;color:#666;}
        .p.info{font-size: 12px; color:#999;}
        .left{ width: 95%; 
          .v_progress{
             margin-top: 15px;
           }
           .v_des{
             margin-top: 15px;
           }
         }
        .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
        i:hover{color:#409EFF;cursor: pointer;}

        }
        .blueZone{margin-top: 20px;width: 600px;height: 48px;line-height: 48px;font-size: 14px;text-align:center;color: #20A0FF;background: #E8F5FF;}
         #botIpt{
            // width: 200px;
         }
    .qrCodeZone{
      margin: 20px 0;
      display: flex;justify-content: flex-start; align-items: center;
    .canvas-right{margin-left: 20px;}
    .canvas{width:116px;height: 116px; display: flex;justify-content: center; align-items: center;}
  }
    }
    .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
       .el-dialog{
           width: 640px;
           max-height: 80%;
           overflow-y:auto; 
           margin: 0 auto;
       }
    }
    .el-button--text{
      color: #f29700;
    }
     .el-progress-bar__inner{
       background-color: #f39700;
    }
    .el-progress-bar__innerText{
       color: #000;
    }
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>